<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .parent {
            border: 1px solid red;
            /* overflow: hidden;可以适应一般属性，但悬浮类例下拉框裁剪 2*/
            /* height: 300px; 3高度不变化*/
        }

        .parent::after {
            content: '';
            display: block;
            clear: both;
        }

        .test::before {
            content: "女士";
        }

        .test::after {
            content: "?";
        }

        .c1 {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }

        .c2 {
            float: right;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        /* .c3{
            clear:both;添加代码量/1
        } */
    </style>
</head>4

<body>
    <!-- 四种解决方案--高度塌陷 -->

    <div class="parent">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        
    </div>
    <h2>ces</h2>
    <span class="test">你好</span>
</body>

</html>